<template>
  <div  v-show="show" v-cloak>
    <div>
      <Header></Header>
    </div>
    <div>
      <div class="main-body">
        <div class="main-content">
          <div class="search">
            <div class="pruduce_kl">
              <div>
                <Crumbs></Crumbs>
              </div>
            </div>
            <div class="history">
               <h3>{{mo_name}}</h3>
               <div class="history_a">
                 <Select v-model="model1" style="width:120px" @on-change="getItemValue">
                   <Option v-for="item in yearlist" :value="item.ca_id" :key="item.ca_id">{{ item.ca_name }}年</Option>
                 </Select>
               </div>
              <ul>
                <li v-for="(item,index) in HistoryList">
                  <span class="his_ri">{{item.h_price}}万</span>
                  <span class="his_fl">{{item.h_month}}份平均成交价格</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <Footer></Footer>
    </div>
  </div>
</template>
<script>
  import 'iview/dist/styles/iview.css'
  import Header from './Header'
  import Footer from './Footer'
  import Crumbs from './Crumbs'
//  import store from './store/index.js'
  export default {
    name: 'revehicle',
    components: {
      'Header': Header,
      'Footer': Footer,
      'Crumbs': Crumbs
    },
    data () {
      return {
        limit: 6,
        yearlist: [],
        HistoryList: [],
        mo_id: '',
        cate: '',
        model1: '',
        show: false,
        getHistoryListAjax: true,
        skey: ''
      }
    },
    created: function () {
      this.verify()
    },
    activated: function () {
      this.verify()
    },
    methods: {
      getItemValue: function (val) {
        this.model1 = val
        this.getHistoryList()
      },
      getyear: function (callback) {
        let thisObj = this
        thisObj.$chaos.ajax({
          data: {},
          slient: true,
          userinfo: false,
          url: 'User/getYearList',
          callback: function (type, res) {
            if (res.status === 'SUCCESS') {
              thisObj.yearlist = res.result.list
              thisObj.model1 = res.result.list[0].ca_id
              callback()
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      getHistoryList: function () {
        let thisObj = this
        if (!thisObj.getHistoryListAjax) {
          return false
        }
        thisObj.getHistoryListAjax = false
        thisObj.$chaos.ajax({
          data: {
            mo_id: thisObj.mo_id,
            year_id: thisObj.model1
          },
          slient: true,
          userinfo: false,
          url: 'User/getHistoryList',
          callback: function (type, res) {
            thisObj.show = true
            thisObj.getHistoryListAjax = true
            if (res.status === 'SUCCESS') {
              thisObj.HistoryList = res.result.list
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      verify: function () {
        let thisObj = this
        thisObj.cate = decodeURI(thisObj.$chaos.getQueryString('cate'))
        thisObj.mo_name = decodeURI(thisObj.$chaos.getQueryString('mo_name'))
        thisObj.mo_id = thisObj.$chaos.getQueryString('mo_id')
        thisObj.skey = decodeURI(thisObj.$chaos.getQueryString('skey'))
        var name = thisObj.cate
        this.name = name
        var crumbs = []
        crumbs[0] = {
          title: thisObj.cate,
          link: '/ProduceList'
        }
        if (thisObj.skey === '') {
          crumbs[1] = {
            title: '全部',
            link: '/FuzzySearch?skey=' + thisObj.skey
          }
        } else {
          crumbs[1] = {
            title: thisObj.skey,
            link: '/FuzzySearch?skey=' + thisObj.skey
          }
        }
        crumbs[2] = {
          title: thisObj.mo_name,
          link: '/ProduceDetail?mo_id=' + thisObj.mo_id + '&name=' + thisObj.cate + '&skey=' + thisObj.skey
        }
        crumbs[3] = {
          title: '成交历史',
          link: ''
        }
        this.$store.commit('crumbs', crumbs)
        this.getyear(function () {
          thisObj.getHistoryList()
        })
      }
    }
  }
</script>
<style>
  .ivu-select-selection{
    border: 0px!important;
  }
  .ivu-select-selected-value{
    font-size: 16px!important;
  }
  .ivu-select-placeholder{
    font-size: 18px!important;
    color: #000!important;
    border: 0px!important;
  }
  .main-title span {
    font-size: 16px!important;
  }
  .nocontent{
    text-align: center;
    clear: both;
    font-size: 20px;
    color: #949494;
    overflow: hidden;
    padding-top: 60px;
  }
  .main-title span{
    cursor: pointer;
  }
  .blue_r{
    color: #528df5;
  }
  *{
    font-family: '微软雅黑';
  }
  .ivu-select{
    margin-left:10px;
  }
</style>
<style scoped>
  .history>h3{
    font-size: 28px;
    font-weight: 600;
    padding-bottom: 20px;
    letter-spacing: 4px;
    border-bottom:1px solid #e2e2e2;
  }
  .history_a{
    margin-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eaeaea;
  }
  .history>ul{
    overflow: hidden;
  }
  .history>ul>li{
    border-bottom:1px solid #e2e2e2;
    height: 65px;
    line-height: 65px;
    font-size: 16px;
  }
  .his_fl{
    margin-right:320px;
    display: block;
    padding: 0px 15px;
  }
  .his_ri{
    width:320px;
    float: right;
   text-align: center;
  }
  .history{
    width:730px;
    margin-left:95px;
    margin-top:30px;
    margin-bottom: 50px;
  }
  .main-body{
    padding-top:0px!important;
  }
  .pruduce_kl{overflow: hidden}
  .search{
    padding: 20px;
    overflow: hidden;
    border: 1px solid #f3f3f3;
    border-radius: 10px 10px;
    box-shadow: -3px 4px 10px #f1f1f1;
    margin-bottom: 50px;
  }
</style>
